<template>
  <div class="content">
    <div class="video-wrap" id="video-wrap">
      <div
        class="video-item"
        v-for="(item, index) in videoSrcArr"
        :key="index"
        :id="`video-item${index + 1}`"
        :class="[
          videoSelectedIndex === index ? 'activeVideo' : '',
          'video-item' + girdActiveIndex,
        ]"
        v-if="girdActiveIndex > index"
        @click="clickVideoItem(index)"
      >
        <Video
          ref="myvideo"
          v-if="item.sn != '' && item.status"
          :data="item.label"
          :item="item"
          :sn="item.sn"
          :chns="item.chns ? item.chns : 0"
          :activeIndex="activeIndex"
          :index="index"
        />
      </div>
    </div>
    <div class="grid-wrap">
      <ul>
        <li
          class="grid-li"
          v-for="(item, index) in girdArr"
          :key="index"
          :class="{ activeGrid: girdActiveIndex === item.id }"
          @click="clickGird(item.id, index)"
        >
          <img class="top" :src="item.icon" />
        </li>
      </ul>

      <!--全部停止  -->
      <div class="batch-box">
        <div class="item" @click="areaFullScreen_fn()">
          <img class="screen-capture" :src="areaFullScreen" />
          <div class="txt">{{ areaFullScreen_txt }}</div>
        </div>
        <div class="item" @click="allStop()">
          <img class="screen-capture" :src="allStopIcon" />
          <div class="txt">{{ allStop_txt }}</div>
        </div>
      </div>
    </div>
    <!-- canvas，截屏 -->
    <div class="img_show_wrap" style="display:none;">
      <canvas width="720" height="450" id="V2I_canvas"></canvas>
    </div>
  </div>
</template>

<script>
import bus from "@/utils/bus";
//import Video from "./VideoFlv"; //flv.js
import Video from "./VideoEasyplayer"; //Easyplayer
//import Video from "./VideoWx"; //wxlinear
//import Video from "./VideoLiveQing.vue";
export default {
  name: "VideoWrap",
  components: { Video },
  props: {},
  data() {
    return {
      videoSrc: "",
      videoSrcArr: [],
      dataArr: [],
      videoSelectedIndex: 0,
      selectIndex: 0,
      activeIndex: 0,
      //底部布局 index
      girdActiveIndex: 1,
      girdArr: [
        { id: 1, icon: require("@/assets/img/screen-ico-01.png") },
        { id: 2, icon: require("@/assets/img/screen-ico-02.png") },
        { id: 4, icon: require("@/assets/img/screen-ico-04.png") },
        { id: 6, icon: require("@/assets/img/screen-ico-06.png") },
        { id: 9, icon: require("@/assets/img/screen-ico-09.png") },
        { id: 12, icon: require("@/assets/img/screen-ico-12.png") },
        { id: 16, icon: require("@/assets/img/screen-ico-16.png") },
      ],
      clickVideoScreenArr: [], //点击的video的id的数组
      //录像，截屏
      record: {
        video_record: require("@/assets/img/record-video.png"),
        screen_capture: require("@/assets/img/screen-capture.png"),
      },
      areaFullScreen: require("@/assets/img/areaFullScreen.png"),
      areaFullScreen_txt: "全屏",
      allStopIcon: require("@/assets/img/allStopIcon_1.png"),
      allStop_txt: "全部停止",
      mySrc: "", // 图片地址
      datas: {}, // 数据给video传name
    };
  },
  created() {},
  mounted() {
    this.videoSrcArr = [
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
      { label: "", sn: "", reg_type: 0, status: true, chns: 0 },
    ];
    //获取到从tree传递来的数据
    bus.$on("changeVideo", (_new) => {
      // console.log(_new);
      //   var _videoSrcArr = this.videoSrcArr;
      if (this.videoSelectedIndex != -1) {
        this.videoSrcArr.splice(this.videoSelectedIndex, 1, {
          label: _new.label,
          sn: _new.sn,
          status: true,
          reg_type: _new.reg_typ,
          chns: _new.chns,
          parent_label: _new.parent_label,
        });
        //光标自动切换到下一个
        this.videoSelectedIndex++;
        if (this.videoSelectedIndex + 1 > this.girdActiveIndex) {
          this.videoSelectedIndex = 0;
        }

        this.allStop_txt = "全部停止";
      }
    });
    this.$store.commit("cameraPlay/setVideoSelIndex", [0, this.videoSrcArr]);
    bus.$emit("videoSelectedIndex", 0, this.videoSrcArr);
  },
  methods: {
    //点击video-wrap
    clickVideoItem(index) {
      this.videoSelectedIndex = index;
      this.selectIndex = index;
      var _videoSrcArr = this.videoSrcArr;
      //   console.log(_videoSrcArr);
      //点击分屏，将index和数组数据传递给控制台为了获取sn
      this.$store.commit("cameraPlay/setVideoSelIndex", [index, _videoSrcArr]);
      //传递给Index组件，用于控制台的显示隐藏
      bus.$emit("videoSelectedIndex", index, _videoSrcArr);
    },
    //点击grid-wrap
    clickGird(index, activeIndex) {
      this.girdActiveIndex = index;
      this.videoSelectedIndex = 0;
      this.activeIndex = activeIndex;
      if (index == 1) {
        this.girdArr[0].icon = require("assets/img/screen-ico-select-01.png");
        this.girdArr[1].icon = require("assets/img/screen-ico-02.png");
        this.girdArr[2].icon = require("assets/img/screen-ico-04.png");
        this.girdArr[3].icon = require("assets/img/screen-ico-06.png");
        this.girdArr[4].icon = require("assets/img/screen-ico-09.png");
        this.girdArr[5].icon = require("assets/img/screen-ico-12.png");
        this.girdArr[6].icon = require("assets/img/screen-ico-16.png");
      } else if (index == 2) {
        this.girdArr[0].icon = require("assets/img/screen-ico-01.png");
        this.girdArr[1].icon = require("assets/img/screen-ico-select-02.png");
        this.girdArr[2].icon = require("assets/img/screen-ico-04.png");
        this.girdArr[3].icon = require("assets/img/screen-ico-06.png");
        this.girdArr[4].icon = require("assets/img/screen-ico-09.png");
        this.girdArr[5].icon = require("assets/img/screen-ico-12.png");
        this.girdArr[6].icon = require("assets/img/screen-ico-16.png");
      } else if (index == 4) {
        this.girdArr[0].icon = require("assets/img/screen-ico-01.png");
        this.girdArr[1].icon = require("assets/img/screen-ico-02.png");
        this.girdArr[2].icon = require("assets/img/screen-ico-select-04.png");
        this.girdArr[3].icon = require("assets/img/screen-ico-06.png");
        this.girdArr[4].icon = require("assets/img/screen-ico-09.png");
        this.girdArr[5].icon = require("assets/img/screen-ico-12.png");
        this.girdArr[6].icon = require("assets/img/screen-ico-16.png");
      } else if (index == 6) {
        this.girdArr[0].icon = require("assets/img/screen-ico-01.png");
        this.girdArr[1].icon = require("assets/img/screen-ico-02.png");
        this.girdArr[2].icon = require("assets/img/screen-ico-04.png");
        this.girdArr[3].icon = require("assets/img/screen-ico-select-06.png");
        this.girdArr[4].icon = require("assets/img/screen-ico-09.png");
        this.girdArr[5].icon = require("assets/img/screen-ico-12.png");
        this.girdArr[6].icon = require("assets/img/screen-ico-16.png");
      } else if (index == 9) {
        this.girdArr[0].icon = require("assets/img/screen-ico-01.png");
        this.girdArr[1].icon = require("assets/img/screen-ico-02.png");
        this.girdArr[2].icon = require("assets/img/screen-ico-04.png");
        this.girdArr[3].icon = require("assets/img/screen-ico-06.png");
        this.girdArr[4].icon = require("assets/img/screen-ico-select-09.png");
        this.girdArr[5].icon = require("assets/img/screen-ico-12.png");
        this.girdArr[6].icon = require("assets/img/screen-ico-16.png");
      } else if (index == 12) {
        this.girdArr[0].icon = require("assets/img/screen-ico-01.png");
        this.girdArr[1].icon = require("assets/img/screen-ico-02.png");
        this.girdArr[2].icon = require("assets/img/screen-ico-04.png");
        this.girdArr[3].icon = require("assets/img/screen-ico-06.png");
        this.girdArr[4].icon = require("assets/img/screen-ico-09.png");
        this.girdArr[5].icon = require("assets/img/screen-ico-select-12.png");
        this.girdArr[6].icon = require("assets/img/screen-ico-16.png");
      } else if (index == 16) {
        this.girdArr[0].icon = require("assets/img/screen-ico-01.png");
        this.girdArr[1].icon = require("assets/img/screen-ico-02.png");
        this.girdArr[2].icon = require("assets/img/screen-ico-04.png");
        this.girdArr[3].icon = require("assets/img/screen-ico-06.png");
        this.girdArr[4].icon = require("assets/img/screen-ico-09.png");
        this.girdArr[5].icon = require("assets/img/screen-ico-12.png");
        this.girdArr[6].icon = require("assets/img/screen-ico-select-16.png");
      }
    },
    //全部停止
    allStop() {
      // console.log(this.videoSrcArr);
      this.allStopIcon = require("@/assets/img/allStopIcon_2.png");
      this.allStop_txt = "已停止";
      var _videoSrcArr = this.videoSrcArr;
      bus.$emit("allStop", _videoSrcArr);
      //   console.log(_videoSrcArr);
    },
    areaFullScreen_fn() {
      var elem = document.getElementById("video-wrap");
      this.requestFullScreen(elem);
    },
    requestFullScreen(element) {
      var requestMethod =
        element.requestFullScreen ||
        element.webkitRequestFullScreen ||
        element.mozRequestFullScreen ||
        element.msRequestFullScreen;
      if (requestMethod) {
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
  },
  watch() {},
};
</script>
<style scoped>
.content {
  position: relative;
  height: 100%;
}
.video-wrap {
  width: 100%;
  height: calc(100% - 60px);
  box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.video-item {
  border: 1px solid #272d38;
  overflow: hidden;
}
.activeVideo {
  border: 1px solid #18d9cb;
  box-shadow: 0 2px 20px #4677d4;
}
/* 底部 */
.grid-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: 10px;
  width: 100%;
  height: 50px;
  /* border-top: 1px solid RGBA(64, 184, 250, 0.4);
   box-shadow: 0px -3px 1px #ceece8; */
  background: RGBA(64, 184, 250, 0.1);
  box-shadow: 0px -2px 10px #446ab6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.grid-wrap ul {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 15px;
}
.grid-wrap ul .grid-li {
  width: 36px;
  height: 36px;
  margin-right: 20px;
  border: 1px solid;
  /* color: #fff; */
}
.grid-wrap ul .grid-li img {
  width: 100%;
  height: 100%;
}

li {
  list-style: none;
}
.activeGrid {
  color: #561a91;
}
.video-item1 {
  width: 98%;
  height: 98%;
  display: block;
  margin-bottom: 10px;
  margin-top: 5px;
  border-radius: 20px;
}
.video-item2 {
  width: 48%;
  height: 98%;
  display: block;
  margin-bottom: 10px;
  margin-top: 5px;
  border-radius: 20px;
}
.video-item4 {
  width: 48%;
  height: 48%;
  display: block;
  margin-bottom: 5px;
  margin-top: 5px;
  border-radius: 20px;
}
.video-item6 {
  width: 33%;
  height: 48%;
  display: block;
  margin-bottom: 5px;
  margin-top: 5px;
  border-radius: 20px;
}
.video-item9 {
  width: 32%;
  height: 32%;
  display: block;
  border-radius: 20px;
}
.video-item12 {
  width: 24%;
  height: 32%;
  display: block;
  border-radius: 20px;
}
.video-item16 {
  width: 24%;
  height: 24%;
  display: block;
  border-radius: 20px;
}
/* 录像截屏 */
.record-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.record-box .item {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  margin-right: 30px;
}
.record-box .item img {
  width: 25px;
  height: 25px;
}
.record-box .item .txt {
  color: #fff;
  font-size: 12px;
  margin-top: 3px;
}
/* 批量 */
.batch-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.batch-box .item {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  margin-right: 35px;
}
.batch-box .item img {
  width: 25px;
  height: 25px;
}
.batch-box .item .txt {
  color: #fff;
  font-size: 12px;
  margin-top: 3px;
}
</style>
